<template>
  <div style="max-width:982px;border: 0">
    <div class="category-container">
      <div class="list-wrapper">
        <ul class="cat-list" v-for="(data, index) in choiceList" :key="index">
          <li
              v-for="(item, idx) in data"
              :key="idx"
              :class="{'cat-item': true, 'on': chosenList[index] && item.cat_id === chosenList[index].cat_id}"
              @click.stop="onCatClick(item, index)">{{ item.cat_name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, toRefs, reactive, ref, Ref, onMounted} from 'vue'
import http from "@/plugin/http";
import {ElMessage} from 'element-plus'

export default defineComponent({

  setup() {

    const state = reactive({
      choiceList: [],
      chosenList: [],
      defaultTmp: [],
      isOnLoading: false,
      value: [],
    })


    const getCategories = async (pid?: string) => {
      if (state.isOnLoading) return;
      state.isOnLoading = true;
      const res = await http.get('/goods.category', {
        pid, status: 1, size: 100000
      });
      state.isOnLoading = false;
      if (res.data.code !== 0) return ElMessage.error(res.data.message);
      if (res.data.data.list.length) (state.choiceList as any).push(res.data.data.list);
      defaultChoiceDetect(res.data.data.list);
    }

    const defaultChoiceDetect = (data) => {
      if (!state.defaultTmp.length) return;
      const chosen: any = state.defaultTmp.shift();
      const object = data.find(item => item.cat_id === chosen.cat_id);
      if (typeof object === 'undefined') return;
      onCatClick(object, state.chosenList.length);
    }

    const onCatClick = (item, level) => {
      let start = level + 1;
      state.choiceList.splice(start);
      state.chosenList.splice(level);
      (state.chosenList as any).push(item);
      getCategories(item.cat_id);
    }

    const getData = () => {
      console.log(state.chosenList)
      return JSON.parse(JSON.stringify(state.chosenList))
    }

    onMounted(getCategories)

    return {
      ...toRefs(state),
      onCatClick,
      getData
    }
  },


  // computed: {
  //   catPath() {
  //     let path = [];
  //     for (let i in this.chosenList) path.push(this.chosenList[i].cat_name);
  //     return path.join(" > ");
  //   }
  // },

  // created() {
  //   this.getCategories('');
  //
  //   // this.props.checkStrictly = true
  //   // this.props.lazyLoad = (node, resolve) => {
  //   //     if (this.node.loading) return
  //   //     this.node = node
  //   //     if (node.level > 0) this.lastValue = node.value
  //   //     this.getAsyncData(resolve)
  //   // }
  // },

  // methods1: {
  //
  //   init(initVal) {
  //     this.defaultTmp = initVal;
  //     if (!this.isOnLoading || !this.choiceList.length) return this.getCategories(0);
  //     this.defaultChoiceDetect(this.choiceList[0]);
  //   },
  //
  //   getLastId() {
  //     if (this.chosenList.length) return this.chosenList[this.chosenList.length - 1].cat_id
  //     return ''
  //   },
  //
  //   getPathList() {
  //     return JSON.parse(JSON.stringify(this.chosenList))
  //   },
})
</script>
<style>
.h-scroll {
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

.category-container {
  width: 100%;
  height: 400px;
  background: #FFF;
}

.list-wrapper {
  height: 100%;
  border: 1px solid #d5e4fa;
  position: relative;
  overflow: hidden;
}

.cat-list {
  float: left;
  width: 243px;
  border-right: 2px solid #d5e4fa;
  background: #fff;
  height: 100%;
  overflow: auto
}

.cat-list:last-child {
  border-right: none
}

.cat-item {
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  font-size: 14px;
  border: 1px solid #FFF;
  margin: 4px;
}

.cat-item:hover, .cat-item.on {
  cursor: pointer;
  background: #dff1fb;
  border: 1px dotted #82bce0;
}

.cat-path {
  margin-top: 10px;
  background-color: #FFFAF2;
  padding: 4px 10px;
  border: 1px solid #FEDBAB;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>